<template>
<div>

<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>通知</span>
</div>

<el-row :gutter="20">
  <el-col :span="12">
  	<el-card class="box-card">
	  <el-form ref="bussiness" 
		:model="p" 
		label-width="130px">

		<el-form-item label="内容前文本：" >
			<el-input v-model="p.msg1" placeholder="请输入内容前文本"></el-input>
		</el-form-item>

		<el-form-item label="产品名称：" >
			<el-input v-model="p.msg2" placeholder="请输入产品名称"></el-input>
		</el-form-item>

		<el-form-item label="变动类型："  >
			<el-input v-model="p.msg3" placeholder="请输入变动类型"></el-input>
		</el-form-item>

		<el-form-item label="变动内容：" >
			<el-input type="textarea" v-model="p.msg4" placeholder="请输入变动内容"></el-input>
		</el-form-item>

		<el-form-item label="内容后文本：" >
			<el-input type="textarea" v-model="p.msg5" placeholder="请输入内容后文本"></el-input>
		</el-form-item>

		<el-form-item class="mt10">
		     <el-button type="primary" 
		     @click="send()">
		     发送</el-button>
		</el-form-item>

	</el-form>
	</el-card>

  </el-col>
  <el-col :span="12">
  	<el-card class="box-card">
	  	<h3>产品变动通知</h3>
	  	<br>
	  	<p>{{p.msg1}}</p>
	  	<p>产品名称 : {{p.msg2}}</p>
	  	<p>变动类型 : {{p.msg3}}</p>
	  	<p>变动内容 : {{p.msg4}}</p>
	  	<p>{{p.msg5}}</p>
	</el-card>
  </el-col>


  <el-col :span="12" class="mt20">
  	<el-card class="box-card">
	  	<h3>注意</h3>
	  	<br>
	  	<p>1，取消关注公众号的用户收不到通知。</p>
	  	<p>2，多次发送容易引起用户反感，请慎重。</p>
	</el-card>
  </el-col>

</el-row>


<el-row class="mt20">
  <el-col :span="24">
  	<h3>发送历史</h3>
  	<el-table
    :data="sendedNoticeList.results"
    border
    v-loading="loading"
    style="width: 100%; margin-top:10px;" >
	    <el-table-column
	      label="内容"
	      width="580">
	      	<template slot-scope="scope">
	      		<p>{{scope.row.msg1}}</p>
	      		<p>产品名称：{{scope.row.msg2}}</p>
	      		<p>变动类型：{{scope.row.msg3}}</p>
	      		<p>变动内容：{{scope.row.msg4}}</p>
	      		<p>{{scope.row.msg5}}</p>
	      	</template>
	    </el-table-column>

	    <el-table-column
	      label="发送状态"
	      width="100">
	       	<template slot-scope="scope">
	       		{{isnotice_label[parseInt(scope.row.isnotice)]}}
	      	</template>
	    </el-table-column>

	    <el-table-column
	      label="发送时间"
	      prop="notice_time"
	      >
	    </el-table-column>

	    
	</el-table>
  </el-col>
</el-row>

<el-row class="text-right mt20 mb20">
	<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="sendedNoticeList.totalRecord">
    </el-pagination>
</el-row>

</el-card>
</div>		
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	name: 'sendnotice',
		data () {
		return {
		  	p : {
		  		'msg1' : '',
		  		'msg2' : '',
		  		'msg3' : '',
		  		'msg4' : '',
		  		'msg5' : '',
		  		'type' : '1',
		  	},

		  	loading : true,

		  	pageNo : 1,
			pageSize : 10,
			totalRecord : 0,
			totalPage : 0,

			isnotice_label : ['未发送', '已发送'],
		}
	},

	props: {

	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'sendedNoticeList',
		]),
	},

	methods : {
		handleSizeChange (val) {
			this.pageSize = val;
			this.getMemberIncomeDetailsList();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.getMemberIncomeDetailsList();
		},

		getSendedNoticeList () {
			var para = {
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log(res);
					this.loading = false;
				}
			};
			this.loading = true;
			this.$store.dispatch('getSendedNoticeList', para);
		},

		send () {
			this.$confirm('你即将给你的所有分销商发送通知，请慎重！！！！！', '提示', {
	          confirmButtonText: '发送',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	          	var para = {
					...this.p,
					cb : res => {
						this.$notify.success({
				          title: '发送成功',
				        });
					},
					err : res => {
						this.$notify.error({
				          title: '发送失败',
				          message: res,
				        });
					}
				};
				this.$store.dispatch('sendNotice', para);
	        }).catch(() => {
	               
	        });

			
		},
	},

	watch : {
	    
	},

	mounted () {
		this.getSendedNoticeList();
	},

}
</script>

<style scoped>

</style>
